<template>
  <el-row>
    <el-divider>选择表单模型</el-divider>
    <template v-if="activeData.__config__.foreignField">
      <el-form-item label="子表单模型">
        <JNPF-TreeSelect :options="modelOptions" v-model="activeData.__config__.modelId"
          placeholder="请选择子表单模型选择" 
          @change="propChange" astLevel lastLevelKey='id' clearable>
        </JNPF-TreeSelect>
      </el-form-item>
    </template>
    <el-divider>选择字段映射</el-divider>
    <el-table :data="fieldMap" class="JNPF-common-table">
      <el-table-column type="index" label="序" width="20" align="center" />
      <el-table-column prop="relationField" label="字段映射" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.relationField" clearable @change="mainFieldChange" filterable placeholder="请选择主表字段">
            <el-option v-for="item in selecteMainFields" :key="item.realField"
              :value="item.realField"
              :label="item.fieldName?item.field+'('+item.fieldName+')':item.field"
              >
            </el-option>
          </el-select>
          <el-select v-model="scope.row.tableField" placeholder="请选择子表字段" clearable @change="subFieldChange" filterable>
            <el-option
              v-for="item in selecteSubFields"
              :key="item.field" :value="item.field"
              :label="item.fieldName?item.field+'('+item.fieldName+')':item.field">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="50">
        <template slot-scope="scope">
          <el-button size="mini" type="text" class="JNPF-table-delBtn"
            @click="delItem(scope.row,scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-actions" @click="addRow">
      <el-button type="text" icon="el-icon-plus">新增一行</el-button>
    </div>
    <el-divider />
    <el-form-item label="显示标题">
      <el-switch v-model="activeData.__config__.showTitle" />
    </el-form-item>
     <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.__config__.noShow" />
    </el-form-item>
  </el-row>
</template>
<script>
import comMixin from './mixin';
import draggable from 'vuedraggable'
import { listByTableName } from "@/api/onlineDev/visualDev"
export default {
  props: ['activeData', 'subTableModelList'],
  mixins: [comMixin],
  components: { draggable },
  data() {
    return {
      modelOptions:this.subTableModelList,
      /**
       * [
       * {
       * "tableField":"sss",
       * "relationField:"sss"
       * }
       * ]
       */
      fieldOptions:[],
      fieldMap:[],
      selecteMainFields:[],
      selecteSubFields:[],
    }
  },
  created(){
    const conf = this.activeData.__config__
    if((!this.subTableModelList||this.subTableModelList.length==0)&&conf.tableName){
      let query = {
        tableName:conf.tableName
      }
      this.getModelListByTableName(query)
    }
    
    let fieldOptions = this.formItemList.map(o => ({ ...o, realField: o.field }))
    this.fieldOptions = fieldOptions.filter(o => o.primaryKey != 1)

    this.fieldMap = this.activeData.__config__.fieldMap
    if(!this.fieldMap){
      this.fieldMap = this.activeData.__config__.fieldMap = []
    }
    debugger

    this.selecteMainFields = this.fieldOptions
    this.selecteSubFields = this.subTableFileds
  },
  mounted(){
    this.$nextTick(()=>{
     
    })
  },
  computed: {
    formItemList() {
      return this.$store.state.generator.formItemList
    },
    subTable() {
      return this.$store.state.generator.subTable || []
    },
    mainTable() {
      let allTable = this.$store.state.generator.allTable
      let item = allTable.filter(o => o.typeId == '1')[0]
      if (!item || !item.table) return ''
      return item.table
    },
    subTableFileds(){
      let key = this.activeData.__config__.tableName
      let item = {}
      let list = this.subTable.filter(o => o.table === key)
      if (list.length) {
        item = list[0]
      }
      let arr = []
      if (item && item.fields) arr = item.fields.filter(o => o.primaryKey != 1)
      return arr
    },
    
  },
  watch: {
    'subTableModelList': function (val) {
      debugger
      if (!val&&this.activeData.__config__.tableName) {
        let query = {
          tableName:activeData.__config__.tableName
        }
        this.getModelListByTableName(query)
        return
      }
      this.modelOptions = val
    },
    'fieldMap': function (val) {
      this.activeData.__config__.fieldMap = this.fieldMap
    }
  },
  methods: {
    getModelListByTableName(data) {
      listByTableName(data).then(res => {
        this.modelOptions = res.data
      })
    },
    propChange(val) {
      debugger
      if (!val) {
        return
      }
    },
   
    addRow(){
      debugger
      this.checkFieldMap()
      let mainLen = this.selecteMainFields.length
      let subLen = this.selecteSubFields.length
      if(mainLen<=0||subLen<=0){
        this.$message('已经无字段可选择！')
        return
      }
      let row = {
        "tableField":"",
        "relationField":""
      }
      this.fieldMap.push(row)
    },
    delItem(row, index) {
      this.fieldMap.splice(index, 1);
      // this.checkFieldMap()
    },
    checkFieldMap(){
      let newMap = this.fieldMap.filter(o => o.tableField != "" && o.relationField != "")
      this.fieldMap = newMap
      this.mainFieldChange()
      this.subFieldChange()
    },
    mainFieldChange(val){
      // debugger
      this.selecteMainFields = this.fieldOptions.filter((o)=>{
        let existFields = this.fieldMap.filter(o2 => o2.relationField === o.realField)
        return !existFields || existFields.length === 0
      })
      // debugger
    },
    subFieldChange(val){
      this.selecteSubFields = this.subTableFileds.filter((o)=>{
        let existFields = this.fieldMap.filter(o2 => o2.tableField === o.field)
        return !existFields || existFields.length === 0
      })
    }
  }
}
</script>